import 'package:bigegg/global/routes/xmm_routes.dart';
import 'package:bigegg/global/user/xmm_account_manager.dart';
import 'package:bigegg/widget/xmm_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../common/log/xmm_log.dart';
import 'xmm_shopping_coin_controller.dart';

class XmmShoppingCoinPage extends StatefulWidget {
  const XmmShoppingCoinPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return XmmShoppingCoinPageState();
  }
}

class XmmShoppingCoinPageState extends State<XmmShoppingCoinPage> {
  final controller = Get.find<XmmShoppingCoinController>();

  @override
  void initState() {
    super.initState();
    XmmLogManger()
        .putLog(XmmLogType.clickEvent, {'page': XmmLogPages.pagePurchase});
    controller.getCoinGoodsList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/xmm_shopping_coin_bg.png"),
            fit: BoxFit.fill,
          ),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            toolBarWidget(
              context,
              "Coin Shop",
              titleColor: Colors.white,
              leftImage: "assets/images/xmm_icon_back_white.png",
              rightImage: "assets/images/xmm_icon_cs.png",
              onRightTap: () => XmmRoutes.routeCsPage(),
            ),
            const SizedBox(height: 21),
            getMyCoinsWidget(),
            const SizedBox(height: 29),
            coinGoodsListWidget(),
          ],
        ),
      ),
    );
  }

  Widget getMyCoinsWidget() {
    return Container(
      width: 327.w,
      height: 104.w,
      padding: const EdgeInsets.only(right: 20),
      alignment: Alignment.centerRight,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/xmm_shopping_my_coins.png"),
        ),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Expanded(child: SizedBox()),
          Obx(
            () => Text(
              "${XmmAccountManager.instance.user.availableCoins}",
              style: TextStyle(
                fontSize: 32.sp,
                color: Colors.white,
                fontWeight: FontWeight.w900,
              ),
            ),
          ),
          const Expanded(child: SizedBox()),
          Text(
            "My Coins",
            style: TextStyle(
              fontSize: 20.sp,
              color: Colors.white,
              fontWeight: FontWeight.w600,
              fontStyle: FontStyle.italic,
            ),
          ),
          const Expanded(child: SizedBox()),
        ],
      ),
    );
  }

  Widget coinGoodsListWidget() {
    return Flexible(
      child: Obx(
        () => ListView.separated(
          padding: EdgeInsets.only(left: 20.w, right: 20.w, bottom: 48.w),
          separatorBuilder: (_, __) => const SizedBox(height: 12),
          itemCount: controller.coinGoodsList.length,
          itemBuilder: (context, index) {
            var item = controller.coinGoodsList.elementAt(index);
            return GestureDetector(
              onTap: () async => controller.applyPay(item),
              child: Container(
                height: 88.w,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  color: Colors.white,
                ),
                child: Stack(
                  children: [
                    Visibility(
                      visible: item.tags != null && item.tags != "",
                      child: Container(
                        width: 70.w,
                        height: 20.w,
                        decoration: const BoxDecoration(
                          borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(8),
                            topRight: Radius.circular(8),
                          ),
                        ),
                        child: Text(
                          item.tags ?? "",
                          style: TextStyle(
                            fontSize: 12.sp,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                    Row(
                      children: [
                        SizedBox(width: 21.w),
                        Image.asset(
                          "assets/images/xmm_icon_money.png",
                          width: 34.w,
                          height: 32.w,
                        ),
                        SizedBox(width: 17.w),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "${item.exchangeCoin}",
                              style: const TextStyle(
                                fontSize: 14,
                                color: Color(0xFF523E0B),
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            Visibility(
                              visible: (item.discount ?? 0) > 0,
                              child: SizedBox(height: 8.w),
                            ),
                            Visibility(
                              visible: (item.discount ?? 0) > 0,
                              child: Text(
                                "${((item.discount ?? 0) * 100).toInt()}% off",
                                style: TextStyle(
                                  fontSize: 9.sp,
                                  color: const Color(0xFF5790FF),
                                ),
                              ),
                            ),
                          ],
                        ),
                        const Expanded(child: SizedBox()),
                        Text(
                          "\$${item.price}",
                          style: TextStyle(
                            fontSize: 18.sp,
                            color: const Color(0xff202020),
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        SizedBox(width: 8.w),
                        item.price != item.originalPrice ? Text(
                          "\$${item.originalPrice}",
                          style: TextStyle(
                            fontSize: 10.sp,
                            color: const Color(0x4D000000),
                            decoration: TextDecoration.lineThrough,
                            decorationStyle: TextDecorationStyle.solid,
                          ),
                        ) : Container(),
                        SizedBox(width: 16.w)
                      ],
                    )
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
